<template>
  <div class="center">
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-select
        v-model="siteNo"
        :clearable="true"
        :filterable="true"
        placeholder="请选择站点"
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="item in sitelist"
          :label="item.siteName"
          :key="item.index"
          :value="item.siteNo"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="sub">查询</el-button>
      <el-select
        v-if="aisleShow"
        v-model="aisleName"
        :clearable="true"
        :filterable="true"
        placeholder="请选择要高亮的通道"
        @change="handleClick"
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="item in arr3"
          :label="item.aisleName"
          :key="item.index"
          :value="item.aisleName"
        >
        </el-option>
      </el-select>
    </div>
    <dv-border-box-11
      :color="['#11caff']"
      backgroundColor="transparent"
      title="三维图数据"
    >
      <Victor
        :class="arr3[0] ? 'victor-style' : 'victor-style-show'"
        ref="mychild"
        :sitemessage="sitemsg"
        :dataList="dataList"
        :siteNo="siteNo"
        :aisleNo="aisleNo"
        @childFn="ModelFn"
        :change="change"
        :deviceDetails="deviceDetails"
      ></Victor>
    </dv-border-box-11>
  </div>
</template>
<script>
import Search from "../../common/select";
import Victor from "../../components/3d/index";
export default {
  components: {
    Search,
    Victor,
  },
  data() {
    return {
      aisleName: "",
      aisleShow: false,
      selectmesh: "",
      aisleNo: "",
      siteNo: "",
      warehouseExtent: "",
      cabinetExtent: "",
      lineExtent: "",
      arr3: [],
      sitelist: [],
      grouparr: [],
      groupModel: [],
      dataList: [],
      sitemsg: {},
      message: {},
      change: false,
      deviceDetails: {
        deviceInfo: "",
        factoryYearMonth: "",
        status: "",
        softwareVersion: "",
        hardwareVersion: "",
      },
    };
  },
  created() {
    if (sessionStorage.getItem("reload") == "yes") {
      sessionStorage.setItem("reload", "no");
      location.reload();
    }
    this.siteNo = this.$route.query.siteNo || "";
  },
  mounted() {
    this.getDeviceDetails();
  },
  methods: {
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
      this.getsitelist();
    },
    ModelFn(payload) {
      this.groupModel = payload;
    },
    //查询
    sub() {
      if (!this.siteNo) {
        return;
      }
      this.aisleShow = true;
      this.$refs.mychild.getweather();
      this.$refs.mychild.getThresholdFn();
      this.$refs.mychild.getavg();
      this.$refs.mychild.gethistoryavg();
      this.getchannel();
      this.getsitemsg();
      this.gettable();
      this.change = !this.change;
      this.getDeviceDetails();
    },
    //获取站点列表
    getsitelist() {
      let param = {
        provinceCode: this.message.provincecode,
        cityCode: this.message.citycode,
        districtCode: this.message.districtcode,
      };
      this.$http
        .post("/site/device/select", param)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.sitelist = res.data.b;
          }
        })
        .catch((err) => {});
    },
    //获取站点信息
    getsitemsg() {
      let siteNo = this.siteNo;
      this.$http
        .get(`/redis/siteMaxTemp/` + siteNo)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.sitemsg = res.data.b;
            this.flag = true;
          }
        })
        .catch((err) => {});
    },
    //获取告警列表信息
    gettable() {
      this.$http
        .post("/site/alarm/tempWarning/" + this.siteNo)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.dataList = res.data.b;
          }
        })
        .catch((err) => {});
    },
    //获取所有通道数据
    getchannel() {
      let siteId = this.siteNo;
      this.$http.get(`/site/device/siteAisles/${siteId}`).then((res) => {
        if (res.data.h.code == 0) {
          this.arr3 = res.data.b.warehouse.concat(
            res.data.b.cabinet,
            res.data.b.line
          );
        }
      });
    },
    //获取站点设备详情转化后的数据
    getDeviceDetails() {
      this.$http
        .get("/site/device/changeSiteDetails/" + this.siteNo)
        .then((res) => {
          if (res.data.h && res.data.h.code == 0 && res.data.b) {
            let {
              deviceInfo,
              factoryYearMonth,
              status,
              softwareVersion,
              hardwareVersion,
            } = res.data.b;
            this.deviceDetails.deviceInfo = deviceInfo || "";
            this.deviceDetails.factoryYearMonth = factoryYearMonth || "";
            this.deviceDetails.status = status || "";
            this.deviceDetails.softwareVersion = softwareVersion || "";
            this.deviceDetails.hardwareVersion = hardwareVersion || "";
          } else {
            this.deviceDetails = {
              deviceInfo: "",
              factoryYearMonth: "",
              status: "",
              softwareVersion: "",
              hardwareVersion: "",
            };
          }
        });
    },
    handleClick(tab) {
      this.grouparr = this.groupModel.children;
      for (let i = 0; i < this.grouparr.length; i++) {
        let index;
        this.arr3.map((item) => {
          if (tab == item.aisleName) {
            index = item.index;
          }
        });
        this.aisleNo = String(index);
      }
    },
  },
  mounted() {
    this.getsitelist();
    if (this.siteNo != "") {
      this.sub();
    }
  },
  updated() {},
  computed: {
    listenshowpage1() {
      return this.$store.state.message;
    },
  },
  watch: {
    listenshowpage1: function (newval, oldval) {
      //判断告警是否为温度告警且是否和当前站点编号一致
      if (
        (newval.hasOwnProperty("定温告警") &&
          newval["定温告警"].siteNo == this.siteNo) ||
        (newval.hasOwnProperty("升温告警") &&
          newval["升温告警"].siteNo == this.siteNo)
      ) {
        this.gettable();
      }
    },
  },
  destroyed() {
    sessionStorage.setItem("reload", "yes");
  },
};
</script>
<style scoped>
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.bar_box {
  padding-right: 22px;
  box-sizing: border-box;
  height: 110px;
}
.select_box {
  box-sizing: border-box;
  overflow: hidden;
}
.search .el-input {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.el-tabs__nav-wrap .is-scrollable .is-top {
  overflow: auto !important;
}
.el-tabs {
  margin-top: 10px;
}
.el-tabs__header {
  margin: 0 !important;
}
.el-tabs /deep/ .el-tabs__active-bar {
  background-color: transparent !important;
  height: 0 !important;
}
.el-tabs /deep/.el-tabs__item {
  padding: 0 20px !important;
  text-align: center;
  margin-right: 10px;
  color: #fff;
  height: 32px;
  line-height: 32px;
  border: 1px solid rgba(19, 81, 156, 1);
  background: #043266;
  border-radius: 5px;
}
.el-tabs /deep/.el-tabs__item.is-active {
  color: rgba(0, 255, 255, 1);
  border: 1px solid rgba(19, 81, 156, 1);
}
.el-tabs >>> .el-tabs__nav-wrap::after {
  height: 0 !important;
}
</style>